{% extends "base.html" %} 


{% block extra_header %}
<script type="text/javascript" src="/static/js/extjs_extension/fixErrorMsgBox.js"></script>
<script type="text/javascript" src="/static/js/GH/GH_UI/forms/GH.ui.forms.MedicalRecordForm.js"></script>
<script type="text/javascript" src="/static/js/GH/GH_UI/forms/GH.ui.forms.PatientSearchForm.js"></script>
<script type="text/javascript" src="/static/js/GH/GH_UI/panels/GH.ui.panels.TestGridPanel.js"></script>
{% endblock %}

{% block title %} Log in  {% endblock %}

{% block extra_script %}
<script type="text/javascript">

var username = '{{user.username}}'
if ('{{user.first_name}}' != "" || '{{user.last_name}}' != "")
	username = '{{user.first_name}}' + " " + '{{user.last_name}}';
	
var store =  new Ext.data.JsonStore({
	url: '/api/get_all_test_info',
	root: 'data',
	totalProperty: 'totalCount',
	idProperty: 'test_id',
	remoteSort: true,
	
	fields: [
	   'content',  
	   {name: 'date', mapping: 'date', type: 'date'}, 
	   'order_by_doctor',
	]
	
	
});


store.setDefaultSort('date', 'desc');

var patient_search_form = new GH.ui.forms.PatientSearchForm();
	
Ext.onReady(function () {
	Ext.QuickTips.init();

	  var viewport = new Ext.Viewport({
	    id: 'mainVP',
	    layout: 'border',
	    border: false,
	    items: [{
	      region: 'north',
	      height: 100,
	      border: false,
	      bodyStyle: 'background-color:#f8f8f8;',
	      title: 'North',
	      collapsible: true,
	      html : 'Welcome, ' + username,
	      //contentEl: 'adsense-north'
	    }, {
	      region: 'west',
	      width: 200,
	      border: false,
	      autoScroll: true,
	      title: 'West',
	      bodyStyle: 'padding:5px;font-size:11px;background-color:#f4f4f4;',
	      html: "Today's Treatment && Medical Trend",
	      collapsible: true,
	      split: true,
	      collapseMode: 'mini'
	    }, {
	      region: 'south',
	      height: 100,
	      html: 'South',
	      border: false,
	      title: 'South',
	      collapsible: true
	    }, {
	      region: 'east',
	      width: 200,
	      html: 'East',
	      border: false,
	      bodyStyle: 'background-color:#f4f4f4;',
	      title: 'East',
	      collapsible: true
	    }, {
	      region: 'center',
	      xtype: 'panel', // TabPanel itself has no title
	      //title: 'Welcome, ' + username,
	      tbar: ['->', 
	             {  text: "Log Out",
	    	  		iconCls: "icon-door_out",
	    	  		handler: function() {
	    	  			window.location = '{%url auth_logout%}';
	    	  		}
	             }],
	      layout: 'fit',
	      items: [{  
	            xtype: 'tabpanel',
	            defaults: {
	            	layout: 'fit',
	            },
	            activeItem: 0,
	            items: [ new GH.ui.panels.TestGridPanel({
		        	id: 'test_info_grid',
	            	title: 'My Test Info',
		        	store: store,
	             }), new GH.ui.forms.MedicalRecordForm ({
	            	title: "My Medical Record",
	                } // eo function onLoadClick
	             ), new Ext.Panel({
	            	    title: 'Search Similar Patients',
		             	items: {
		             		html: ' <div style=\"width:auto;\">   \
				             	    <div class=\"x-box-tl\"><div class="x-box-tr"><div class="x-box-tc"></div></div></div> \
				             	    <div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc"> \
				             	        <h3 style="margin-bottom:5px;">Search the Similar Patients</h3> \
				             	        <div id= "patient_search"></div>\
				             	        <div style="padding-top:4px;"> \
				             	            Medical record live search requires a minimum of 4 characters. \
				             	        </div> \
				             	    </div></div></div> \
				             	    <div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div> \
				             	    </div>',
			             	   listeners: {
			                    	'afterrender': function() {
			                    		console.log(Ext.get("patient_search"));
			                    		patient_search_form.render(Ext.get("patient_search"));       		
			                    	}
			                    }
		             	},
	               })
	             ]
	           }]
	         }] 
	  });
	  
	  
	  
	  store.setBaseParam('csrfmiddlewaretoken', Ext.get("hidden-csrf").dom.children[0].children[0].value);
	  store.load({ params: {
		      'start' : 0,
	  	      'limit' : Ext.getCmp('test_info_grid').pageSize,
	        }
	  });
})
</script>
{% endblock %}

{% block body %}
<!--<h1>Hello World eQuill!</h1>-->
<div id="hidden-csrf" class="x-hidden">
{% csrf_token %}
</div>
{% endblock %}